<template>
	<view class="content">
		<view class="selectClass">
			<uni-section class="selectClass-section" title="">
				<uni-data-picker class="selectClass-picker" placeholder="请选择您的年级" popup-title="请选择您的年级"
					:localdata="dataTree" v-model="classes" @change="onchange" :clear-icon="false">
				</uni-data-picker>
			</uni-section>
			<view class="tips">
				<text>已坚持打卡：<text class="tips-content">1</text>天</text>
			</view>
		</view>

		<view class="banner">
			<uni-swiper-dot :info="swiperList" :current="current" field="image" mode="round">
				<swiper class="banner-swiper" :current="current" autoplay interval="3000" @change="onChange">
					<swiper-item v-for="(item, idx) in swiperList" :key="idx">
						<view class="slide-item">
							<image class="banner-img" :src="item.image" mode="aspectFill" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<view v-for="(item, idx) in notices" :key="idx">
			<view v-if="item.noticeType == 2">
				<uni-notice-bar show-icon scrollable
					:text="`${item.noticeTitle} : ${stripHtmlTags(item.noticeContent)}`" />
			</view>
		</view>

		<view class="stats-outer-container">
			<view class="stats-container">
				<view class="stats-grid">
					<view class="stat-item">
						<view class="stat-label">答题总数</view>
						<view class="stat-value">0</view>
					</view>
					<view class="stat-item">
						<view class="stat-label">正确题数</view>
						<view class="stat-value">0</view>
					</view>
					<view class="stat-item">
						<view class="stat-label">准确率</view>
						<view class="stat-value">0%</view>
					</view>
				</view>
			</view>
		</view>

		<view class="subjectArea">
			<view class="subjectContent">
				<uni-card :is-shadow="false" margin="5rpx" title="语文" class="cardInfo">
					<text class="uni-body">111</text>
				</uni-card>
				<uni-card :is-shadow="false" margin="5rpx" title="数学" class="cardInfo">
					<text class="uni-body">222</text>
				</uni-card>
			</view>

			<view class="subjectContent">
				<uni-card :is-shadow="false" margin="5rpx" title="英语" class="cardInfo">
					<text class="uni-body">333</text>
				</uni-card>
				<uni-card :is-shadow="false" margin="5rpx" title="生物" class="cardInfo">
					<text class="uni-body">444</text>
				</uni-card>
			</view>
			<view class="subjectContent">
				<uni-card :is-shadow="false" margin="5rpx" title="物理" class="cardInfo">
					<text class="uni-body">555</text>
				</uni-card>
				<uni-card :is-shadow="false" margin="5rpx" title="地理" class="cardInfo">
					<text class="uni-body">666</text>
				</uni-card>
			</view>

		</view>
	</view>
</template>


<script>
	import {
		getBannerList
	} from "@/api/banner.js";
	import {
		getNoticeList
	} from "@/api/notice.js";
	import config from "@/config.js";
	import {
		GetGradeOptionList
	} from "@/api/grade.js";

	export default {
		data() {
			return {
				banners: [],
				notices: [],
				current: 0,
				classes: "",
				dataTree: [],
			};
		},
		mounted() {
			this.getBanners();
			this.getNotices();
			this.getGradeOptionList();
			this.loadSelectedGrade();
		},
		computed: {
			swiperList() {
				return (this.banners || []).map((item) => ({
					image: this.formatImageUrl(item.imageUrl),
					link: item.linkUrl || "",
				}));
			},
		},
		methods: {
			async getBanners() {
				const res = await getBannerList();
				this.banners = res.data;
				console.log(this.banners);
			},
			async getNotices() {
				const res = await getNoticeList();
				this.notices = res.data;
				console.log(this.notices);
			},
			async getGradeOptionList() {
				const res = await GetGradeOptionList();
				this.dataTree = res.data.map((item) => ({
					text: item.gradeName,
					value: item.gradeName,
				}));
				//   console.log("年级选项数据:", this.dataTree);

				// 数据加载完成后，再次尝试设置已选年级
				this.$nextTick(() => {
					setTimeout(() => {
						this.loadSelectedGrade();
					}, 100);
				});
			},

			// 从本地存储加载已选年级
			loadSelectedGrade() {
				try {
					const selectedGrade = uni.getStorageSync("selectedGrade");
					if (selectedGrade) {
						console.log("从本地存储读取的年级:", selectedGrade);
						// 设置已选年级到dataTree中
						this.classes = selectedGrade;
						// 显示已选年级提示
						uni.showToast({
							title: `欢迎回来，${selectedGrade}的用户`,
							icon: "none",
							duration: 2000,
						});
					}
				} catch (error) {
					console.error("读取本地存储失败:", error);
				}
			},

			stripHtmlTags(html) {
				if (!html) return "";
				return html.replace(/<[^>]*>/g, "");
			},

			formatImageUrl(url) {
				if (!url) return "";
				if (/^https?:\/\//i.test(url)) return url;
				const base =
					(config && config.baseUrl) || process.env.VUE_APP_BASE_API || "";
				return url.startsWith("/") ? base + url : `${base}/${url}`;
			},
			onChange(e) {
				this.current = e.detail.current || 0;
			},

			onchange(e) {
				const selectedGrade = e.detail.value[0].value;
				console.log("用户选择的年级:", selectedGrade);
				uni.setStorageSync("selectedGrade", selectedGrade);
				uni.showToast({
					title: `选择成功`,
					icon: "none",
				});
			},
		},
	};
</script>

<style scoped>
	.content {}

	.selectClass {
		background-color: #ffffff;
		padding-bottom: 5rpx;
		display: flex;
		justify-content: space-between;
	}

	.selectClass-section {
		display: inline-block;
	}

	.selectClass-picker {
		width: 300rpx;
		margin-top: -50rpx;
	}

	.banner {
		width: 100%;
	}

	.banner-swiper {
		width: 100%;
		height: 360rpx;
	}

	.slide-item {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.banner-img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.tips {
		font-size: 30rpx;
		margin-top: 10rpx;
	}

	.tips-content {
		font-size: 38rpx;
		color: red;
		padding-right: 18rpx;
	}

	.stats-outer-container {
		width: 99%;
		margin: 0 auto;
		background: linear-gradient(to bottom, #36D1DC 0%, #5B86E5 100%);
		border-radius: 10rpx;
		padding: 5rpx;
		margin-bottom: 10rpx;
	}

	.stats-container {
		background: white;
		border-radius: 8rpx;
		padding: 18rpx;
	}

	.stats-grid {
		display: flex;
		justify-content: space-around;
	}

	.stat-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.stat-value {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;

	}

	.stat-label {
		font-size: 30rpx;
		margin-bottom: 40rpx;
		color: #666;
	}

	.subjectArea {}

	.subjectContent {
		display: flex;
		justify-content: space-around;
	}

	.cardInfo {
		display: inline-block;
		width: 300rpx;
		height: 300rpx;
	}

	::v-deep .uni-card__header {
		text-align: center;
	}

	::v-deep .uni-card__content {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>